<template>
  <div class="wrap-container sn-container"> 
    <div class="sn-content"> 
      <div class="sn-title">Top流量应用</div> 
      <div class="sn-body"> 
        <div class="wrap-container"> 
          <div class="chartsdom" id="chart_talent"></div>
        </div> 
      </div> 
    </div>   
  </div>
</template>



<script>
import echarts from 'echarts'
export default {
  name: "talent",
  data() {
    return {
      timer: null
    }
  },
  props: {
    time: {
      type: Number,
      default: 60000
    },
  },
  mounted() {
    this.getData();
    if(this.timer){
      clearInterval(this.timer)
    }else{
      this.timer=setInterval(()=>{
        this.getData()
      },this.time)
    }

  },
  beforeDestroy() {
    clearInterval(this.timer)
  },
  methods: {
    getData() {
      const u = '/reception/bigScreen/queryAppTraffic';
      this.$axios.get(u,{headers:{'cloud-Auth-Token': localStorage.getItem('cloud-Auth-Token')}})
      .then((res)=>{
        if(res.data.code == 200){
          this.tableData =  res.data.data;
          this.getEchart();
        }else{
          this.$message.error('暂无数据');
        };
      }).catch((err)=>{
          console.log(err);
      });
    },
    getEchart() {
      let myChart = echarts.init(document.getElementById('chart_talent'));
      // this.tableData =  [{
      //   name: '站点1',
      //   value: 5
      // },{
      //   name: '站点2',
      //   value: 10
      // },{
      //   name: '站点3',
      //   value: 10
      // },{
      //   name: '站点4',
      //   value: 10
      // },{
      //   name: '站点5',
      //   value: 5
      // },{
      //   name: '站点6',
      //   value: 5
      // },{
      //   name: '站点7',
      //   value: 10
      // },{
      //   name: '站点8',
      //   value: 5
      // },{
      //   name: '站点9',
      //   value: 5
      // }];
      let tableData = [];
      
      if(this.tableData && this.tableData.length>6){
        tableData = this.tableData.splice(0,6)
      }else {
        tableData = this.tableData || []
      }
      let rich = {
        white: {
          color: '#ddd',
          align: 'center',
          padding: [3, 0]
        }
      };
      let placeHolderStyle = {
        normal: {
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          color: 'rgba(0, 0, 0, 0)',
          borderColor: 'rgba(0, 0, 0, 0)',
          borderWidth: 0
        }
      };
      let data = [];
      let color=['#EAEA26', '#906BF9',  '#01E17E', '#3DD1F9', '#FFAD05', '#4465fc']
      for (let i = 0; i < tableData.length; i++) {
        data.push({
          value: tableData[i].value,
          name: tableData[i].name,
          itemStyle: {
            normal: {
              borderWidth: 6,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i]
            }
          }
        }, {
          value: 2,
          name: '',
          itemStyle: placeHolderStyle
        });
      }
      let showed = tableData && tableData.length ? false : true;
      let option = {
        title: {
          show: showed, // 是否显示title
          text: '暂无数据',
          left: 'center',
          top: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 16,
            fontWeight: 400
          },
        },
        series: [{
          name: '',
          type: 'pie',
          clockWise: false,
          radius: ['66%', '68%'],
          center: ['50%', '50%'],
          hoverAnimation: false,
          itemStyle: {
            normal: {
              label: {
                show: true,
                position: 'outside',
                color: '#ddd',
                formatter: (params) => {
                  let percent = 0;
                  let total = 0;
                  for (let i = 0; i < tableData.length; i++) {
                    total += tableData[i].value;
                  }
                  percent = ((params.value / total) * 100).toFixed(0);
                  if (params.name !== '') {
                    return params.name + '\n{white|' + '占比' + percent + '%}';
                  } else {
                    return '';
                  }
                },
                rich: rich
              },
              labelLine: {
                length: 10,
                length2: 30,
                show: true,
                color: '#00ffff'
              }
            }
          },
          data: data
        }]
      }

     

      myChart.setOption(option, true);
      window.addEventListener('resize', () => {
        myChart.resize();
      });
    },
  },
  beforeDestroy() {
    
  }
};
</script>

<style lang="less" scoped>
.chartsdom {
    width: 100%;
    height: 95%;
  }
</style>
